@extends('user.base')
@section('content-header','New Patient Case')
@section('content-body')
<!-- Main content -->
<section class="content">
	<!--Patient Case Info section-->
	<div class="container-fluid" id="content-section">
		<div class="col-md-9">
			<div>
				<form action="{{ URL('case/info')}}" method="post" accept-charset="utf-8">
					<input type="hidden" name="_method" value="POST">
					<input type="hidden" name="_token" value="{{ csrf_token() }}">
					<input type="hidden" name="_patient_id" value="{{ $patient->id }}" >
					<div class="form-group">
						<label>First Name:</label>
						<input class="form-control" type="text" required="required" name="firstname" value="{{ $patient->first_name or "" }}" placeholder="Enter patient firstname here.">
					</div>
					<div class="form-group">
						<label>Last Name:</label>
						<input class="form-control" type="text" required="required" name="lastname" value="{{ $patient->last_name or "" }}" placeholder="Enter patient family name here.">
					</div>
					<div class="form-group">
						<label>OS:</label>
						<input class="form-control" type="number" min="0.0" max="5.1" name="eyeSightLeft" value="{{ $patient->eyesight_left or 0.0 }}" placeholder="0.0" step="0.1">
					</div>
					<div class="form-group">
						<label>OD:</label>
						<input class="form-control" type="number" min="0.0" max="5.1" name="eyeSightRight" value="{{ $patient->eyesight_right or 0.0 }}" placeholder="0.0" step="0.1">
					</div>
					<div class="form-group">
						<label>Case Description:</label>
						<br>
						<textarea class="form-control" name="caseDescription" value="" placeholder="Enter brief case description here." rows="5" cols="50"></textarea>																																													







					</div>
					<div class="pull-right">
						<button type="submit" name="createCase" class="btn btn-primary btn-large">
							Add
						</button>
						<a href="{{ URL('patient/info/'.$patient->id)}}" class=" btn btn-danger btn-large">
							Cancel
						</a>
					</div>
					<button class="pull-left btn btn-success pull-left" id="capture" data-toggle="modal" data-target="#capModal">
						Capture
					</button>
				</form>
			</div>
		</div><!--/.Patient info-->
		<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="capModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">
							Capture Dialog
						</h4>
					</div>
					<div class="modal-body">
						<p>
							<a href="{{ $medihref }}" class="pull-left btn btn-success pull-left">
								Launch Capture Program
							</a>
						</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
							Cancel
						</button>
						<button type="button" class="btn btn-primary" id="loadPic">
							Save
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!-- /.Left col -->
@endsection
@section('js')
<script>
var check = 0;

function appendPic(value,eye) { 
	var $html = '<div class="col-md-4">';	
	$html += '<img src="http://localhost:8080/'+value+'" /></div>';
	$html += '<div>';
	return $html;
}
$('#loadPic').on('click', function() {
	if(check == 0){
	$.ajax({
		dataType: "text",
		url: "http://localhost:8080/api/upload/requestPic",
		type: "GET",
		data:{id:{{$case_id}}},
		success: function(data) {
			check = 1;						
			var result = jQuery.parseJSON(data);			
			$("#content-section").append("<div class='col-md-9'><hr /><div id='os_section'><h4>OS:</h4></div><hr /><div id='od_section'><h4>OD:</h4></div></div>");			
			$.each(result, function(index,info) {								
				var $imgSrc = info["pic_url"];
				var $eye = info["left_or_right"];
				if($eye == "OS"){
					$(appendPic($imgSrc)).appendTo("#os_section",$eye);
				} else if ($eye =="OD"){
					$(appendPic($imgSrc)).appendTo("#od_section",$eye);
				}
			});
			var $footerHtml = $("#footer-warpper").clone();
			$("#footer").remove();
		}
	});}	
	$('#capModal').modal('hide');	
});


</script>
@endsection
